<template>
<div id="U3D">
    <div class="wrapper-u3d">
     <div class="tips">
        正在登陆请稍候...
    </div>
    </div>
    
    <Loading v-if="LoadingShow"></Loading>
</div>
</template>
<script>
    import {
        refreshTitle,
        errFun
    } from "../tools.js";
    import api from "../api";
    import Loading from './loading.vue';

    export default {
        props: ["userInfo"],
        components: {
            Loading
        },
        created() {

            refreshTitle(this.$route.meta.title);
            this.$store.dispatch('CHANGE_FOOTER_SHOW'); // vuex形式实现的隐藏效果
        },
        computed: {
            LoadingShow() {
                return this.$store.state.loadings.show
            },
        },
        methods: {
            u3dLogin(id, enterpriseID) {
                //禁止按钮
                //发送请求
                var that = this;
                api.loginU(id, enterpriseID).then(function(result) {
                    if (result.data.code != 200 || result.status != 200) {
                        // todo 缺少提示 
                        alert('扫码失败，请退出重新进行扫码哦');
                        var wrapper = document.querySelector(".wrapper-u3d");
                        wrapper.children[0].innerHTML = '扫码失败，请重新扫码。'
                        // 让他进行关注公众号
                        // that.jump();
                        // todo
                        return;
                    }
                    var wrapper = document.querySelector(".wrapper-u3d");
                    wrapper.children[0].innerHTML = '登陆成功，即将跳转...'
                    setTimeout(function() {
                        that.$router.replace({
                            name: 'today',
                            query: {
                                unity: 'unityLogin'
                            }
                        });
                    }, 1000)
                }).catch(function(error) {
                    // that.cleanlocalStorageToken();
                    if (error.response) {
                        // 请求被响应但不是 200
                        window.alert("请求出错，状态码：" + error.response.status + "。请重新扫码进行登录")
                        that.jump();
                    } else if (error.request) {
                        // 请求出错
                        window.alert("请求出错，请重新扫码进行登录");
                        that.jump();
                    } else {
                        // 不明错误
                        window.alert("请求出错，请重新扫码进行登录" + error.message);
                        that.jump();
                    }
                    console.log(error.config);
                });
            },
            jump() {
                window.location.href = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA4MDIwMDA0Mw==&scene=124#wechat_redirect';
                return;
            },
            hide() {
                var model = document.querySelector('.model');
                model.style.display = 'none';
                // 然后进行跳转
                this.$router.replace('/today');
            },
            show() {
                var model = document.querySelector('.model');
                var unity = document.querySelector('.unity');
                model.style.display = 'block';
            },
            cleanlocalStorageToken() {
                localStorage.removeItem("token");
                window.localStorage.removeItem("token");
                window.localStorage.clear();
            },
            // 获取url的参数
            queryUrlParamByName(name) {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            }
        },
        mounted() {
            this.$nextTick(function() {
                /*
                  // 准备数据 id Unity 登陆 ID 
                  // enterpriseID 企业ID
                */
                var that = this;
                var id = that.$route.params.id;
                var enterpriseID = this.queryUrlParamByName('enterpriseID');
                api.getUserInfo().then(function(result) {
                    // window.alert(result.status);
                    if (result.status == 401) { // 401 状态码 用户认证失败
                        // window.alert('start leanlocalStorageToekn');
                        that.cleanlocalStorageToken();
                        var replaceUrl = "http://wechat.shapejoy.com/unity/" + id + "/login?enterpriseID" + enterpriseID;
                        // window.alert('re url:' + replaceUrl);
                        window.location.replace(replaceUrl);
                        return;
                    };

                    // 判断用户信息中是否存在身高、体重、性别等信息，如果没有强制输入
                    if (result.data.user.height == 0 || result.data.user.weight == 0 || result.data.user.sex == 0) {
                        var wrapper = document.querySelector(".wrapper-u3d");
                        var num = 3;
                        wrapper.children[0].innerHTML = '您还没有输入体重信息，即将跳转...'
                            // 设置定时器
                        setTimeout(function() {
                            wrapper.children[0].innerHTML = ''; // 将页面信息进行清空；
                            that.$router.push('/user/gender'); // 进行页面的跳转
                        }, 1000)
                    } else {
                        that.u3dLogin(id, enterpriseID)
                    };
                }, function(error) {
                    alert("getUserInfo：请求出错回调");
                });
            })

        },
        beforeDestroy() {
            this.$store.dispatch('CHANGE_FOOTER_SHOW'); // 当需求改变为当点击返回的时候，需要改变状态
        },
    }
</script>
<style>
    #U3D {
        .tips {
            width: 70%;
			height: 40px;
			color: #fdb811;
			font-size: 22px;
			line-height: 40px;
			border-bottom: 1px solid #fdb811;
			text-align: center;
			word-spacing: 3px;
			margin-left: 15%;
			margin-top: 50%;
        }
        .ensure {
            width: 70%;
            height: 40px;
            position: absolute;
            left: 0;
            top: -15%;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .ensure button {
            width: 45%;
            height: 100%;
            background: none;
            border-radius: 10px;
            float: left;
            color: #fff;
            background-color: #00bb9c;
            letter-spacing: 3px;
            outline: none;
            font-size: 16px;
            border: none;
        }
        .ensure button:nth-child(1) {
            margin-right: 10%;
        }
    }
</style>